<template>
  <el-row>
    <el-col :span="1">
      <div class="grid-content bg-purple-dark">&emsp;</div>
    </el-col>
    <el-col :span="23">
      <div class="grid-content bg-purple-dark">
        <el-container>
          <!-- 顶部 数值统计 -->
          <el-header>
            <el-row :gutter="10">
              <el-col :span="7" v-for="(item, i) in roleList" :key="i">
                <div>
                  <el-statistic
                    group-separator=","
                    :precision="2"
                    :value="item.roleNum"
                    :title="item.roleName"
                  ></el-statistic>
                </div>
              </el-col>
              <el-col :span="3">
                <el-button type="danger" @click="openAddModal"
                  >点击添加</el-button
                >
              </el-col>
            </el-row>

            <el-dialog :visible.sync="dialogVisible" title="添加员工">
              <el-form :model="addEmp" ref="addEmp">
                <el-form-item label="姓名" prop="empRealName">
                  <el-input
                    v-model="addEmp.empRealName"
                    placeholder="请输入员工姓名"
                  ></el-input>
                </el-form-item>
                <el-form-item label="账号" prop="empUacc">
                  <el-input
                    v-model="addEmp.empUacc"
                    placeholder="请输入员工账号"
                  ></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="empPassword">
                  <el-input
                    v-model="addEmp.empPassword"
                    placeholder="请输入员工密码"
                  ></el-input>
                </el-form-item>
                <el-form-item label="身份证号码" prop="empCode">
                  <el-input
                    v-model="addEmp.empCode"
                    placeholder="请输入员工身份证号码"
                  ></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="empTel">
                  <el-input
                    v-model="addEmp.empTel"
                    placeholder="请输入员工手机号"
                  ></el-input>
                </el-form-item>
                <el-form-item label="所属职位">
                  <el-select v-model="addEmp.roleId" placeholder="请选择职位">
                    <el-option
                      :label="item.roleName"
                      :value="item.roleId"
                      v-for="(item, i) in [
                        { roleId: 1, roleName: '业务员' },
                        { roleId: 2, roleName: '业务主管' },
                        { roleId: 3, roleName: '经理' },
                      ]"
                      :key="i"
                    ></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="所属上级">
                  <el-select
                    v-model="addEmp.empSuperId"
                    placeholder="请选择上级"
                  >
                    <el-option
                      :label="item.empRealName"
                      :value="item.empId"
                      v-for="(item, i) in empList"
                      :key="i"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addOneEmp">确 定</el-button>
              </span>
            </el-dialog>
          </el-header>
          <el-main>
            <template>
              <el-table :data="empList" style="width: 100%">
                <el-table-column
                  prop="roleId"
                  label="身份"
                  width="130"
                  :formatter="showStyle"
                >
                </el-table-column>
                <el-table-column prop="empUacc" label="账号" width="130">
                </el-table-column>
                <!-- <el-table-column prop="empPassword" label="密码" width="130">
                </el-table-column> -->
                <el-table-column
                  prop="empRealName"
                  label="真实姓名"
                  width="130"
                >
                </el-table-column>
                <el-table-column prop="empCode" label="身份证号" width="130">
                </el-table-column>
                <el-table-column prop="empTel" label="手机号" width="130">
                </el-table-column>
                <el-table-column prop="backup1" label="上级" width="130">
                </el-table-column>
                <el-table-column prop="operation" label="操作" width="240">
                  <template slot-scope="scope">
                    <el-button
                      type="primary"
                      round
                      size="mini"
                      style="width: 90px"
                      @click="changeEmp(scope.row.empId)"
                      >修改</el-button
                    >
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </el-main>
        </el-container>
      </div>
    </el-col>
    <el-col :span="0">
      <div class="grid-content bg-purple-dark">&emsp;</div>
    </el-col>

    <el-dialog
      title="修改员工信息"
      :visible.sync="dialogFlag"
      width="30%"
      center
    >
      <el-form ref="oneEmp" :model="oneEmp" label-width="80px">
        <el-form-item label="账号">
          <el-input v-model="oneEmp.empUacc"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="oneEmp.empPassword"></el-input>
        </el-form-item>
        <el-form-item label="真实姓名">
          <el-input v-model="oneEmp.empRealName"></el-input>
        </el-form-item>
        <el-form-item label="身份证号码">
          <el-input v-model="oneEmp.empCode"></el-input>
        </el-form-item>

        <el-form-item label="性别">
          <el-input v-model="oneEmp.empSex"></el-input>
        </el-form-item>
        <el-form-item label="生日">
          <el-input v-model="oneEmp.empBirthday"></el-input>
        </el-form-item>

        <el-form-item label="职位">
          <el-select v-model="oneEmp.roleId" placeholder="请选择职位">
            <el-option
              :label="item.roleName"
              :value="item.roleId"
              v-for="(item, i) in [
                { roleId: 1, roleName: '业务员' },
                { roleId: 2, roleName: '业务主管' },
                { roleId: 3, roleName: '经理' },
              ]"
              :key="i"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="所属上级">
          <el-select v-model="oneEmp.empSuperId" placeholder="请选择活动区域">
            <el-option
              :label="item.empRealName"
              :value="item.empId"
              v-for="(item, i) in empList"
              :key="i"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogFlag = false">取 消</el-button>
        <el-button type="primary" @click="updataEmp()">确 定</el-button>
      </span>
    </el-dialog>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      addEmp: {},
      empList: [],
      roleList: [],
      dialogFlag: false,
      oneEmp: {},
      dialogVisible: false,
    };
  },
  methods: {
    addOneEmp() {
      this.$axios.post("emp", this.addEmp).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("修改成功");
          this.loadEmpManager();
        }
      });
      this.dialogVisible = false;
    },
    openAddModal() {
      this.dialogVisible = true;
    },
    loadEmpManager() {
      this.$axios.get("emp/quaryAll/").then((res) => {
        this.empList = res.data.data.empList;
        this.roleList = res.data.data.roleList;
      });
    },
    showStyle(row, column, cellValue, index) {
      switch (cellValue) {
        case 1:
          return "业务员";
        case 2:
          return "业务主管";
        case 3:
          return "总经理";
      }
    },
    changeEmp(empId) {
      this.dialogFlag = true;
      this.$axios.get("emp/" + empId).then((res) => {
        this.oneEmp = res.data.data.emp;
      });
    },
    updataEmp() {
      this.$axios.put("emp", this.oneEmp).then((res) => {
        if (res.data.code == 200) {
          this.$message.success("修改成功");
          this.loadEmpManager();
        }
      });
      this.dialogFlag = false;
    },
  },
  mounted() {
    this.loadEmpManager();
  },
};
</script>

<style>
.el-header {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 20px;
  height: anto;
}
.el-main {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 20px;
  height: anto;
}
</style>